<template>
  <el-collapse-item>
    <template slot="title">
      <el-tag :type="tag.type" :effect="tag.effect" >{{ tag.tagText }}</el-tag>

      <span class="span-description">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
            <span v-for="(content, idx) in titleContent" :key="idx" :style="content.style">{{ content.text }}</span>
            </div>
            <div>
                <span v-for="(content, idx) in titleContent" :key="idx" :style="content.style">{{ content.text }}</span>
            </div>

          </el-tooltip>
      </span>


      <span style="float: right;">{{ message.submitTime }}</span>

      <el-badge is-dot class="item" v-if="message.status===0"></el-badge>
    </template>

    <slot name="default"></slot>



    <el-button type="danger" plain v-if="message.status===0" @click="message.status=1;$emit('set-as-read', message)">
      设为已读
    </el-button>
    <el-button type="danger" plain v-if="message.status===1" disabled>已读</el-button>
  </el-collapse-item>
</template>

<script>
import {MESSAGE} from "@/components/new/message-item/const/message";
export default {
  name: "MessageItemTemplate",
  props: {
    message: {
      default() {
        return {}
      }
    }
  },
  computed: {
    tag(){
      return MESSAGE[this.message.messageType].tag;
    },
    titleContent(){
      return MESSAGE[this.message.messageType].formatTitleContent(this.message);
    }
  }
}
</script>

<style scoped>

.span-description {
  margin-left: 1%;
  width: 40%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
</style>
